<template>
  <div class="app-container calendar-list-container">
    <!--条件查询-->
    <div class="filter-container">
      <el-input  style="width: 130px;" class="filter-item" v-model="query.name" :placeholder="'权限名称'">
      </el-input>
      <el-input  style="width: 130px;" class="filter-item" v-model="query.description" :placeholder="'权限描述'">
      </el-input>
      <el-select clearable @visible-change="getAllSystem" style="width: 200px" class="filter-item" v-model="query.systemId" :placeholder="'所属系统'">
        <el-option v-for="item in systems" :key="item.id"  :value="item.id" :label="item.name">
        </el-option>
      </el-select>
      <el-select  clearable style="width: 110px" class="filter-item" v-model="query.type" :placeholder="'权限类型'">
        <el-option v-for="item in type" :key="item" :label="item == 1 ? '视图权限':'数据权限'" :value="item">
        </el-option>
      </el-select>
      <el-select  clearable style="width: 110px" class="filter-item" v-model="query.status" :placeholder="'权限状态'">
        <el-option v-for="item in status" :key="item" :label="item == 1 ? '正常':'禁用'" :value="item">
        </el-option>
      </el-select>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" v-waves icon="el-icon-search" @click="getList">{{$t('table.search')}}</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">{{$t('table.add')}}</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleDelete" type="danger" icon="el-icon-delete">{{$t('table.delete')}}</el-button>
    </div>
    <!--带边框的表格-->
    <el-table
      :data="tableData"
      border
      v-loading="listLoading" element-loading-text="拼命加载中"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <!--多选支持-->
      <el-table-column
        type="selection"
      >
      </el-table-column>
      <!--展开显示详情-->
      <el-table-column
        type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="权限名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="权限描述">
              <span>{{ props.row.description }}</span>
            </el-form-item>
            <el-form-item label="所属系统">
              <span>{{ props.row.systemId }}</span>
            </el-form-item>
            <el-form-item label="排序">
              <span>{{ props.row.orders }}</span>
            </el-form-item>
            <el-form-item label="权限值">
              <span>{{ props.row.permissionValue }}</span>
            </el-form-item>
            <el-form-item label="权限状态">
              <span>{{ props.row.status }}</span>
            </el-form-item>
            <el-form-item label="路径">
              <span>{{ props.row.uri }}</span>
            </el-form-item>
            <el-form-item label="创建时间">
              <!--时间戳转换-->
              <span>{{props.row.ctime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <!--自定义索引-->
      <el-table-column
        type="index"
        label="序号"
        align="center"
        :index="indexMethod">
      </el-table-column>
      <el-table-column
        sortable
        prop="name"
        label="权限名称"
      >
      </el-table-column>
      <el-table-column
        prop="description"
        label="权限描述"
      >
      </el-table-column>
      <el-table-column
        sortable
        prop="status"
        label="状态"
      >
       <template slot-scope="props">
          <el-button disabled size="mini" v-if="props.row.status" type="success">正常</el-button>
          <el-button disabled size="mini" v-else type="danger">禁用</el-button>
       </template>
      </el-table-column>
      <el-table-column
        sortable
        prop="type"
        label="类型"
      >
        <template slot-scope="props">
          <el-button disabled size="mini" v-if="props.row.type" type="primary">视图</el-button>
          <el-button disabled size="mini" v-else type="danger">数据</el-button>
        </template>
      </el-table-column>
      <el-table-column
        sortable
        prop="orders"
        label="排序"
      >
      </el-table-column>
      <!--操作按钮-->
      <el-table-column align="center" :label="$t('table.actions')" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!--编辑-->
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{$t('table.edit')}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current_page"
        :page-sizes="page_sizes"
        :page-size="page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total_size">
      </el-pagination>
    </div>
    <!--添加修改-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="info" :model="info" label-position="right" label-width="100px" style='width: 400px; margin-left:50px;'>
        <!--prop用于进行表单校验-->
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="info.name"></el-input>
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="info.description"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select  style="width: 110px" class="filter-item" v-model="info.type" :placeholder="'权限类型'">
            <el-option v-for="item in type" :key="item" :label="item == 1 ? '视图权限':'数据权限'" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属系统" prop="systemId">
          <el-select @visible-change="getAllSystem" style="width: 200px" class="filter-item" v-model="info.systemId" :placeholder="'所属系统'">
            <el-option v-for="item in systems" :key="item.id"  :value="item.id" :label="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="info.type === 0" label="权限值" prop="permissionValue">
          <el-select   style="width: 200px" class="filter-item" v-model="info.permissionValue" :placeholder="'权限值'">
            <el-option v-for="item in permissionValue" :key="item.value"  :value="item.value" :label="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <!--视图授权的时候才显示-->
        <el-form-item v-if="info.type === 1 || info.type == null" label="权限值" prop="permissionValue">
          <el-input v-model="info.permissionValue"></el-input>
        </el-form-item>
        <el-form-item  label="权限路径" prop="uri">
          <el-input v-model="info.uri"></el-input>
        </el-form-item>
        <el-form-item label="权限状态" prop="status">
          <el-select  clearable style="width: 110px" class="filter-item" v-model="info.status" :placeholder="'权限状态'">
            <el-option v-for="item in status" :key="item" :label="item == 1 ? '正常':'禁用'" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限排序" prop="orders">
          <el-input v-model="info.orders"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
        <el-button v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
  import waves from '@/directive/waves' // 水波纹指令
  import { parseTime } from '@/utils'
  import { add, getByCondition, deleteByIds, updateSelectiveById } from '@/api/upms/permission'
  import { getSystemByPage } from '@/api/upms/system'
  export default{
    directives: {
      waves
    },
    data() {
      return {
        tableData: null, // 查询的数据
        current_page: 1,
        page_sizes: [5, 10, 15, 20, 50],
        page_size: 5,
        total_size: undefined,
        listLoading: false,
        type: [ // 描述类型
          0,
          1
        ],
        info: {
          id: undefined, // 用于添加
          name: undefined,
          description: undefined,
          orders: undefined,
          permissionValue: undefined,
          type: undefined,
          uri: undefined,
          info: undefined
        },
        query: { // 用于查询
          name: undefined,
          description: undefined,
          systemId: undefined,
          type: undefined,
          status: undefined
        },
        dialogFormVisible: false, // 添加更新组织的会话窗口
        dialogStatus: undefined, // 会话的状态,是创建还是修改
        textMap: {
          update: '编辑',
          create: '添加'
        },
        status: [0, 1],
        downloadLoading: false,
        multipleSelection: [],
        systems: [],
        permissionValue: [{ name: '查询', value: 'get' }, { name: '修改', value: 'put' }, { name: '增加', value: 'post' }, { name: '删除', value: 'delete' }],
        rules: {
          name: [
            { required: true, message: '请输入权限名称', trigger: 'blur' }
          ],
          description: [
            { required: true, message: '请输入权限描述', trigger: 'blur' }
          ],
          systemId: [
            { required: true, message: '请选择所属系统', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择权限类型', trigger: 'blur' }
          ],
          permissionValue: [
            { required: true, message: '请选择权限值', trigger: 'blur' }
          ],
          uri: [
            { required: true, message: '请选择权限路径', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '请选择权限状态', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      deepClon(obj) { // 深度克隆对象
        const proto = Object.getPrototypeOf(obj)
        return Object.assign({}, Object.create(proto), obj)
      },
      indexMethod(index) { // 自定义序号
        return this.page_size * (this.current_page - 1) + index + 1
      },
      handleCreate() {
        // 初始化数据
        for (var item in this.info) {
          this.info[item] = undefined
        }
        // 清除表单校验结果
        if (this.$refs['info']) {
          this.$refs['info'].clearValidate()
        }
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
      },
      createData() {
        this.$refs.info.validate((validate) => {
          if (validate) {
            add(this.info).then(response => {
              if (response.data.code === 0) {
                this.dialogFormVisible = false
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.getList()
              } else {
                this.$message({
                  message: '添加失败',
                  type: 'error'
                })
              }
            })
          }
        })
      },
      handleUpdate(value) { // 更新
        if (this.$refs['info']) {
          this.$refs['info'].clearValidate()
        }
        // 一定要深度克隆对象,不然容易出bug.比如先编辑然后添加
        this.info = this.deepClon(value)
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
      },
      updateData() {
        this.$refs['info'].validate((validate) => {
          if (validate) {
            // 更新数据
            updateSelectiveById(this.info).then(response => {
              if (response.data.code === 0) {
                this.dialogFormVisible = false
                this.$message({
                  message: '更新信息成功',
                  type: 'success'
                })
                this.getList()
              } else {
                this.$message({
                  message: '更新信息失败',
                  type: 'error'
                })
              }
            })
          } else {
            this.$message({
              message: '请按提示填入正确的表单信息',
              type: 'info'
            })
          }
        })
      },
      handleDelete() {
        this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (this.multipleSelection.length < 1) {
            this.$message({
              message: '请选择要删除的组织',
              type: 'info'
            })
          }
          // 传入数组
          const ids = []
          const data = this.multipleSelection
          data.forEach((item) => {
            ids.push(item.id)
          })
          this.deleteData(ids).then(response => {
            if (response.data.code === 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              this.$message({
                type: 'error',
                message: '删除失败!'
              })
            }
          })
        })
      },
      deleteData(ids) {
        // 删除系统
        deleteByIds(ids).then(response => {
          if (response.data.code === 0) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getList()
          } else {
            this.$message({
              message: '删除失败',
              type: 'error'
            })
          }
        })
      },
      getList() {
        this.listLoading = true
        // 加载列表
        getByCondition(this.query, this.current_page, this.page_size, 'pid_asc').then(response => {
          this.listLoading = false
          if (response.data.code === 0) {
            const data = response.data.data
            this.tableData = data.list
            this.total_size = data.total
          } else {
            this.$message({
              message: '加载信息失败',
              type: 'error'
            })
          }
        })
      },
      handleSizeChange(pageSize) {
        if (pageSize === this.page_size) {
          return
        }
        this.page_size = pageSize
        this.getList()
      },
      handleCurrentChange(pageNum) {
        if (pageNum === this.current_page) {
          return
        }
        this.current_page = pageNum
        this.getList()
      },
      handleSelectionChange(value) {
        this.multipleSelection = value
      },
      parseTime(val) {
        return parseTime(val)
      },
      getAllSystem(val) {
        if (val) {
          const system = {}
          getSystemByPage(system, 1, 999, 'name_asc').then(
            response => {
              if (response.data.code === 0) {
                this.systems = response.data.data.list
              } else {
                this.$message({
                  message: '获取系统信息失败',
                  type: 'error'
                })
              }
            }
          )
        }
      }
    },
    created() {
      this.getList()
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .tree-container{
    border: 1px dashed #85bbd2;
    border-radius: 2px;
    padding: 10px;
    text-align: center;
    min-height: 500px;
    .tree-title{
      display: inline-block;
      height: 40px;
      padding: 10px;
      color: #999999;
    }
  }
  .demo-table-expand {
    font-size: 0;
    label {
      width: 90px;
      color: #99a9bf;
    }
    .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
  }
</style>
